<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>ClippingGroup - Three.js Docs</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<script src="../scripts/highlight.min.js"></script>
	<link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
	<link type="text/css" rel="stylesheet" href="../styles/page.css">
</head>
<body>
		<p class="inheritance" translate="no"><a href="EventDispatcher.html">EventDispatcher</a> → <a href="Object3D.html">Object3D</a> → <a href="Group.html">Group</a> → </p>
	<h1 translate="no">ClippingGroup</h1>
		<section>
			<header>
				<div class="class-description"><p>In earlier three.js versions, clipping was defined globally
on the renderer or on material level. This special version of
<code>THREE.Group</code> allows to encode the clipping state into the scene
graph. Meaning if you create an instance of this group, all
descendant 3D objects will be affected by the respective clipping
planes.</p>
<p>Note: <code>ClippingGroup</code> can only be used with <code>WebGPURenderer</code>.</p></div>
			</header>
			<article>
				<div class="container-overview">
					<h2>Constructor</h2>
					<h3 class="name name-method" id="ClippingGroup" translate="no">new <a href="#ClippingGroup">ClippingGroup</a><span class="signature">()</span> </h3>
					<div class="method">
						<div class="description">
							<p>Constructs a new clipping group.</p>
						</div>
					</div>
				</div>
				<h2 class="subsection-title">Properties</h2>
				<div class="member">
					<h3 class="name" id="clipIntersection" translate="no">.<a href="#clipIntersection">clipIntersection</a><span class="type-signature"> : boolean</span> </h3>
					<div class="description">
						<p>Whether the intersection of the clipping planes is used to clip objects, rather than their union.</p>
						<p>Default is <code>false</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="clipShadows" translate="no">.<a href="#clipShadows">clipShadows</a><span class="type-signature"> : boolean</span> </h3>
					<div class="description">
						<p>Whether shadows should be clipped or not.</p>
						<p>Default is <code>false</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="clippingPlanes" translate="no">.<a href="#clippingPlanes">clippingPlanes</a><span class="type-signature"> : Array.&lt;<a href="Plane.html">Plane</a>></span> </h3>
					<div class="description">
						<p>An array with clipping planes.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="enabled" translate="no">.<a href="#enabled">enabled</a><span class="type-signature"> : boolean</span> </h3>
					<div class="description">
						<p>Whether clipping should be enabled or not.</p>
						<p>Default is <code>true</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="isClippingGroup" translate="no">.<a href="#isClippingGroup">isClippingGroup</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
					<div class="description">
						<p>This flag can be used for type testing.</p>
						<p>Default is <code>true</code>.</p>
					</div>
				</div>
				<h2 class="subsection-title">Source</h2>
				<p>
					<a href="https://github.com/mrdoob/three.js/blob/master/src/objects/ClippingGroup.js" translate="no" target="_blank" rel="noopener">src/objects/ClippingGroup.js</a>
				</p>
			</article>
		</section>
<script src="../scripts/linenumber.js"></script>
<script src="../scripts/page.js"></script>
</body>
</html>